<extend name="Layout/base" />
<block name="css">
	<style>
		.el-main {
			padding: 20px;
			border: 1px solid #ccc;
		}
		.el-tabs {
			height: 100%;
			background: #fff;
			padding-top: 20px;
		}
		.el-tabs__nav-scroll {
			padding-left: 20px;
		}
		.select {
			text-align: right;
			margin-bottom: 20px;
		}
		.el-select {
			margin-right: 20px;
		}
		.table {
			border: 1px solid #ccc;
		}
		.select {
			text-align: right;
		}
		.el-input--suffix {
			width: 200px;
			margin-right: 20px;
		}
		.el-select .el-input {
			width: 105px;
		}
	</style>
</block>
<block name="content">
	<el-tabs v-model="activeName" type="card">
		<el-tab-pane label="待审核信息" name="stuff">
			<div class="select">
				<el-select size="small" v-model="province">
					<el-option v-for="item in prolist" :key="item.value" :label="item.label" :value="item.value"> </el-option>
				</el-select>
				<el-select size="small" v-model="city">
					<el-option v-for="item in citylist" :key="item.value" :label="item.label" :value="item.value"> </el-option>
				</el-select>
				<el-input size="small" @keyup.enter.native="changeParam" placeholder="请输入内容" v-model="param.key">
					<i slot="suffix" class="el-input__icon el-icon-search"></i>
				</el-input>
			</div>
			<div class="table">
				<el-table :data="tableData" max-height="250" style="width: 100%" :cell-style= "{ 'text-align': 'center'}" :header-cell-style="{ 'text-align':'center'}">
					<el-table-column prop="mobile" label="登录手机"></el-table-column>
					<el-table-column prop="name" label="姓名"></el-table-column>
					<el-table-column prop="province_city" label="城市"></el-table-column>
					<el-table-column prop="partner_name" label="所属城市合伙人"></el-table-column>
					<el-table-column prop="audit_info" label="审核内容"></el-table-column>
					<el-table-column prop="option" label="操作">
						<template slot-scope="scope">
							<span style="border: 1px solid #ccc;color: #409EFF;padding:0px 10px;border-radius: 3px;display: inline-block;" @click="check(scope.row.id)">查看</span>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="pagenation">
				<el-pagination background layout="prev, pager, next" @size-change="handleSizeChange"
							   @current-change="handleCurrentChange" :page-size="param.size" :total="param.total"></el-pagination>
			</div>
		</el-tab-pane>
		<el-tab-pane label="审核记录" name="order">
			<div class="select">
				<el-select v-model="province">
					<el-option v-for="item in prolist" :key="item.value" :label="item.label" :value="item.value"> </el-option>
				</el-select>
				<el-select v-model="city">
					<el-option v-for="item in citylist" :key="item.value" :label="item.label" :value="item.value"> </el-option>
				</el-select>
				<el-input size="small" @keyup.enter.native="changeCheckParam" placeholder="请输入内容" v-model="checkParam.key">
					<i slot="suffix" class="el-input__icon el-icon-search"></i>
				</el-input>
			</div>
			<div class="table">
				<el-table :data="checkData" max-height="250" style="width: 100%" :cell-style= "{ 'text-align': 'center'}" :header-cell-style="{ 'text-align':'center'}">
					<el-table-column prop="name" label="姓名"></el-table-column>
					<el-table-column prop="mobile" label="登录手机"></el-table-column>
					<el-table-column prop="province_city" label="城市"></el-table-column>
					<el-table-column prop="partner_name" label="所属城市合伙人"></el-table-column>
					<el-table-column prop="audit_info" label="审核内容"></el-table-column>
					<el-table-column prop="status" label="状态">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.status === '2'" type="danger" disable-transitions>审核不通过</el-tag>
							<el-tag v-if="scope.row.status === '3'" type="primary" disable-transitions>审核通过</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="audit_time" :formatter="dateFormat" label="审核时间"></el-table-column>
				</el-table>
			</div>
			<div class="pagenation">
				<el-pagination background layout="prev, pager, next" @size-change="handleCheckSizeChange"
							   @current-change="handleCheckCurrentChange" :page-size="checkParam.size" :total="checkParam.total"></el-pagination>
			</div>
		</el-tab-pane>

	</el-tabs>

</block>
<block name="js">
	<script>
        new Vue({
            el: '#app',
            data: function() {
                return {
                    province: "",
                    city: "",
                    searchinput: "",
                    prolist: [
                        {
                            value: 'guangdong',
                            label: '广东'
                        }, {
                            value: 'guangxi',
                            label: '广西'
                        }, {
                            value: 'fujian',
                            label: '福建'
                        }
                    ],
                    citylist: [
                        {
                            value: 'shenzhen',
                            label: '深圳'
                        }, {
                            value: 'guangzhou',
                            label: '广州'
                        }, {
                            value: 'dongguan',
                            label: '东莞'
                        }
                    ],
                    tableData: [],
                    checkData: [],
                    activeName: "stuff",
					param:{
                        key: '',
						province: '',
						city: '',
						status: '1',
                        page: 1,
                        size: 10,
					},
					checkParam: {
                        key: '',
                        province: '',
                        city: '',
                        status: '2,3',
                        page: 1,
                        size: 10,
					}
                }
            },
			created: function () {
				this.getData();
				this.getCheckData();
            },
            methods: {
                getData : function () {
                    var _this = this;
                    $.post(HOME_URL + '/orderAdmin/Worker/getData', _this.param, function (data) {
                        if(data.status){
                            _this.param.total = parseInt(data.data.count);
                            _this.tableData = data.data.data;
                        }else{
                            _this.$message.error(data.msg);
                        }
                    }, 'json');
                },
				getCheckData : function () {
                    var _this = this;
                    $.post(HOME_URL + '/orderAdmin/Worker/getData', _this.checkParam, function (data) {
                        if(data.status){
                            _this.checkParam.total = parseInt(data.data.count);
                            _this.checkData = data.data.data;
                        }else{
                            _this.$message.error(data.msg);
                        }
                    }, 'json');
                },
                handleSizeChange: function (size) {
					this.param.size = size;
					this.getData();
                },
                handleCheckSizeChange: function (size) {
                    this.checkParam.size = size;
                    this.getCheckData();
                },
                handleCurrentChange: function (page) {
                    this.param.page = page;
                    this.getData();
                },
                handleCheckCurrentChange: function (page) {
                    this.checkParam.page = page;
                    this.getCheckData();
                },
                changeParam: function () {
                    this.param.page = 1;
                    this.getData();
                },
                changeCheckParam: function () {
					this.checkParam.page = 1;
					this.getCheckData();
                },
                check(id) {
					window.location.href = HOME_URL+ "/orderAdmin/Worker/checkpage?id=" + id;
				},
                dateFormat(row, column, cellValue, index){
                    const daterc = row[column.property]
                    if(daterc!=null){
                        const dateMat= new Date(daterc * 1000);
                        const year = dateMat.getFullYear();
                        const month = dateMat.getMonth() + 1;
                        const day = dateMat.getDate();
                        const hh = dateMat.getHours();
                        const mm = dateMat.getMinutes();
                        const ss = dateMat.getSeconds();
                        const timeFormat= year + "-" + month + "-" + day + " " + hh + ":" + mm + ":" + ss;
                        return timeFormat;
                    }
                }
			}
        });
	</script>
</block>